import React, { useEffect, useState } from "react";
import {
    Breadcrumb,
    Card,
    Table,
    Input,
    Row,
    Col,
    Select,
    Button,
    List,
    Tag,
    Modal,
    message,
    Space,
} from "antd";
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
} from "@ant-design/icons";
import { MergeRouteComponentProps } from "../../../../router/types";
import { fetchList, addItem } from "../../../../http/grade";
import { fetchList as fetchRoomList } from "../../../../http/room";
import { fetchList as fetchSubjectList } from "../../../../http/subject";

interface IProps extends MergeRouteComponentProps {}

const GradeManage: React.FC<IProps> = () => {
    /**
     * 组件状态
     */
    const [list, setList] = useState([]);
    const [roomList, setRoomList] = useState([]);
    const [subjectList, setSubjectList] = useState([]);
    const [addModalVisible, setAddModalVisible] = useState(false);
    const [name, setName] = useState("");
    const [rid, setRid] = useState("");
    const [sid, setSid] = useState("");

    /**
     * 获取班级列表
     */
    const getList = async () => {
        const res = await fetchList();
        setList(res.data.data);
    };

    /**
     * 获取教室列表
     */
    const getRoomList = async () => {
        const res = await fetchRoomList();
        setRoomList(res.data.data);
    };

    const getSubjectList = async () => {
        const res = await fetchSubjectList();
        setSubjectList(res.data.data);
    };

    /**
     * 生命周期
     */
    useEffect(() => {
        getList();
        getRoomList();
        getSubjectList();
    }, []);

    /**
     * 表格列配置
     */
    const columns = [
        {
            title: "班级名",
            dataIndex: "grade_name",
        },
        {
            title: "课程名",
            dataIndex: "subject_name",
        },
        {
            title: "教室号",
            dataIndex: "room_name",
        },
    ];

    /**
     * 添加弹框
     */
    const AddModal = (
        <Modal
            title="添加班级"
            okText="确定"
            cancelText="取消"
            visible={addModalVisible}
            onOk={async () => {
                // 添加
                const res = await addItem(name, rid, sid);
                // 如果不成功，提示用户
                if (res.data.code !== 201) {
                    message.error(res.data.message);
                    return;
                }
                // 如果成功，刷新列表，关闭弹框
                getList();
                setAddModalVisible(false);
            }}
            onCancel={() => {
                setAddModalVisible(false);
            }}
        >
            <Space direction="vertical" size="large" style={{ width: "100%" }}>
                {/* 教室号 */}
                <Input
                    placeholder="请输入班级名称"
                    onChange={(v) => setName(v.target.value)}
                />

                <Row gutter={20}>
                    <Col span={12}>
                        {/* 教室选择 */}
                        <Select
                            placeholder="请选择教室"
                            onChange={(v: string) => setRid(v)}
                            style={{ width: "100%" }}
                        >
                            {roomList.map((item: any) => (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            ))}
                        </Select>
                    </Col>

                    <Col span={12}>
                        {/* 课程选择 */}
                        <Select
                            placeholder="请选择课程"
                            onChange={(v: string) => setSid(v)}
                            style={{ width: "100%" }}
                        >
                            {subjectList.map((item: any) => (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            ))}
                        </Select>
                    </Col>
                </Row>
            </Space>
        </Modal>
    );

    return (
        <div className="grade-manage">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">试题管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">班级管理</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            <Card>
                <Row>
                    <Button
                        type="primary"
                        onClick={() => setAddModalVisible(true)}
                    >
                        <PlusOutlined /> 添加班级
                    </Button>
                </Row>

                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(record: any) => record.grade_id}
                />
            </Card>

            {/* 添加教室 */}
            {AddModal}
        </div>
    );
};

export default GradeManage;
